<template>
  <el-row :gutter="20" class="tag-mount" :style="siteContentViewHeight">
    <el-col :span="5" class="list">
      <el-card>
        <div class="list-header">
          <el-select v-model="catalogClassId">
            <el-option
              v-for="item in catalogClassList"
              :key="item.catalogClassId"
              :label="item.catalogClassNm"
              :value="item.catalogClassId"
            ></el-option>
          </el-select>
        </div>
        <el-tree :data="catalogTreeList" :props="props" @node-click="handleClickNode" default-expand-all>
          <div
            class="mount-tree-item clearfix"
            :class="{ selectNode: selectCatalogId === data.catalogId }"
            slot-scope="{ node, data }"
          >
            <el-tooltip effect="dark" :enterable="false" :content="node.label" placement="top">
              <span class="catalog-name">{{ node.label }}</span>
            </el-tooltip>
            <span class="catalog-count">{{ data.dataAssetCount }}</span>
          </div>
        </el-tree>
      </el-card>
    </el-col>
    <el-col :span="19">
      <el-card>
        <tag-content-header search refresh @toolFun="toolFun">
          <template #title>
            <span>本分类标签列表</span>
          </template>
          <template #tools>
            <el-button type="primary" plain @click="handleAdd" class="addBtn"
              ><i class="el-icon-plus"></i>添加标签到此分类</el-button
            >
          </template>
        </tag-content-header>
        <tag-table
          ref="table"
          @refresh="getList"
          :data="dataList"
          :loading="loading"
          :columns="columns"
          :params="params"
          :total="totalSize"
          :height="tableHeight"
          @rowClick="rowClick"
        >
          <template #mounterNm="{ scope }">
            {{ $name(scope.row, 'mounterNnm', 'mounterNm') }}
          </template>
          <template #hotVal="{scope}">
            <icon-svg name="iconFire" class="svg-hot" v-for="(hot, index) in scope.row.hotVal" :key="index"></icon-svg>
            <icon-svg
              name="iconFireOff"
              class="svg-hot off"
              v-for="(hot, index) in 5 - scope.row.hotVal"
              :key="10 - index"
            ></icon-svg>
          </template>
          <template #operation="{ scope }">
            <div class="operation-button-box">
              <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
                <icon-svg name="iconDelete" class="svg-delete" @click.stop.native="handleDelete(scope.row)"></icon-svg>
              </el-tooltip>
            </div>
          </template>
        </tag-table>
      </el-card>
    </el-col>
    <add-tag ref="addTag" :catalogId="selectCatalogId" @refresh="refresh"></add-tag>
  </el-row>
</template>

<script>
import utils from '@/plugins/utils'
import addTag from './add-category-tag'
export default {
  components: {
    addTag
  },
  data() {
    return {
      catalogClassId: '',
      catalogClassList: [],
      catalogTreeList: [],
      props: {
        children: '_children',
        label: 'catalogNm'
      },
      selectCatalogId: '',
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '标签名称',
          prop: 'tagNm',
          tooltip: false,
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '使用热度',
          prop: 'hotVal',
          width: 200,
          align: 'center'
        },
        {
          show: true,
          label: '挂载人员',
          prop: 'mounterNm',
          align: 'center',
          width: 200
        },
        {
          show: true,
          label: '挂载时间',
          prop: 'mountTm',
          width: 200,
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 100
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      firstLoad: true
    }
  },
  computed: {
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight
      }
    },
    siteContentViewHeight() {
      // 页面内容高度 =  可视窗口高度 - 内容padding 90
      var height = this.documentClientHeight - 90
      return { height: height + 'px' }
    },
    tableHeight() {
      return this.documentClientHeight - 200
    }
  },
  watch: {
    catalogClassId(val) {
      this.selectCatalogId = ''
      this.getCatalogTree(val)
    },
    selectCatalogId() {
      this.getList()
    }
  },
  created() {
    this.catalogClassId = Number(this.$route.params.catalogClassId)
    this.getCatalogClassList()
  },
  methods: {
    rowClick(row) {
      if (row.tagId) this.handleReview(row)
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    getCatalogClassList() {
      this.$ajax({
        url: this.$ajax.setUrl('dcl/dclAssetCatalogClass/list'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.catalogClassList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getCatalogTree() {
      this.$ajax({
        url: this.$ajax.setUrl(`dcl/dclAssetCatalog/catalogClassId/${this.catalogClassId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          var list = utils.arrayToTree(data.data, {
            id: 'catalogId',
            pid: 'parentCatalogId',
            mainSort: 'catalogLevel'
          })
          this.catalogTreeList = list
          if (this.firstLoad) {
            let selectCatalogId = ''
            for (let i = 0; i < data.data.length; i++) {
              if (data.data[i].tail) {
                selectCatalogId = data.data[i].catalogId
                break
              }
            }
            this.selectCatalogId = selectCatalogId
          }
          this.firstLoad = false
          this.addSelectClass()
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    addSelectClass() {
      this.$nextTick(() => {
        let nodes = document.querySelectorAll('.el-tree-node__content')
        nodes.forEach(v => v.classList.remove('select-content'))
        let select = document.querySelector('.selectNode')
        if (select && select.parentNode) select.parentNode.classList.add('select-content')
      })
    },
    handleClickNode(data) {
      if (data.tail) {
        this.selectCatalogId = data.catalogId
        this.addSelectClass()
      }
    },
    getList() {
      this.loading = true
      this.params.queryParams.catalogId = this.selectCatalogId
      this.$ajax({
        url: this.$ajax.setUrl('dcl/dclAssetCatalogMount/pageList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleAdd() {
      if (!this.selectCatalogId) {
        this.$message.info('请选择类目')
        return
      }
      this.$refs.addTag.showDrawer()
    },
    handleDelete(scope) {
      this.$confirm(`确定取消挂载标签【${scope.tagNm}】`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`dcl/dclAssetCatalogMount/${this.selectCatalogId}/${scope.tagId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.data || data.msg)
            this.refresh()
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    refresh() {
      this.getList()
      this.getCatalogTree()
    },
    handleReview(scope) {
      this.$blank('market-tag', { params: { id: scope.tagId } })
    }
  }
}
</script>

<style lang="scss">
.tag-mount {
  .el-card {
    border: 1px solid #e3e5e6;
    height: 100%;
    .el-card__body {
      height: 100%;
    }
  }
  .tag-table .el-table__row {
    cursor: pointer;
  }
  .list .el-card__body {
    padding: 0;
    background-color: #e8edf5;
  }
  .el-tree {
    background-color: transparent;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
  .el-tree-node__content {
    height: 40px;
    line-height: 40px;
    &:hover {
      color: #fff;
      background-color: rgba(134, 194, 230, 0.6);
    }
    &.select-content {
      color: #fff;
      background-color: #7883c1;
      position: relative;
      &:after {
        width: 5px;
        content: '';
        background-color: #86c2e6;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
      }
    }
    .el-tree-node__expand-icon {
      width: 20px;
      height: 20px;
      border: 1px solid #fff;
      margin-left: 20px;
      padding: 0;
      background-color: #7883c1;
      line-height: 5px;
      &.is-leaf {
        visibility: hidden;
      }
      &:before {
        display: inline-block;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        content: '+';
        color: #fff;
      }
      &.expanded {
        transform: rotate(180deg);
        &::before {
          content: '-';
        }
      }
    }
  }
  .el-col {
    height: 100%;
    &.list {
      .list-header {
        padding: 10px 0;
        background-color: #7883c1;
        text-align: center;
        .el-select {
          width: 90%;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: #a2abd9;
            border-color: #a2abd9;
            margin: 5px 0;
          }
          .el-input .el-select__caret {
            height: 20px;
            line-height: 20px;
            color: #fff;
          }
          .el-input__suffix {
            top: 10px;
          }
        }
      }
      .mount-tree-item {
        width: calc(100% - 24px);
        .catalog-name {
          float: left;
          max-width: calc(100% - 35px);
          margin-left: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .catalog-count {
          float: right;
          margin-right: 20px;
          color: #2f54eb;
        }
      }
    }
    .addBtn {
      color: #fff;
      padding: 10px 20px;
    }
    .tag-table {
      .el-table--border td {
        padding-left: 20px;
        padding-right: 20px;
      }
      .el-table--striped .el-table__body tr.el-table__row--striped td {
        background-color: #f7f4ef;
      }
      .svg-hot {
        width: 20px;
        height: 20px;
        margin: 0 2px;
        &.off {
          color: #bfbfbf;
        }
      }
    }
  }
}
</style>
